<template>
  <div class="box7">
    <div class="title">
      <p>使用次数</p>
    </div>
    <div class="zongcishu">
      <div>运行次数</div>
      <div style="font-size: 14px; margin-bottom: 6px">{{ runCount }}</div>
      <div>故障次数</div>
      <div style="font-size: 14px">{{ faultCount }}</div>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, watch, nextTick } from "vue";
import { RobotApi } from "@/api/map/statecount";

/* 1. 接收城市名 */
const props = defineProps<{ city: string }>();

/* 2. DOM & 次数 */
const charts = ref<HTMLDivElement>();
let myChart: echarts.ECharts;
const runCount = ref(0);
const faultCount = ref(0);

/* 3. 绘图函数 */
async function drawLine() {
  const res = await RobotApi.getRobotStateCount({ province: props.city });

  runCount.value = res.all[0]["运行"];
  faultCount.value = res.all[1]["故障"];

  const xAxisData = res.time.map(
    (item) => Object.keys(item).find((k) => k !== "异常") ?? ""
  );
  const runData = res.time.map(
    (item) => Object.values(item).find((_, i, arr) => i !== arr.length - 1) ?? 0
  );
  const faultData = res.time.map((item) => item["异常"]);

  const option: echarts.EChartsOption = {
    tooltip: { trigger: "axis" },
    color: ["#FFCC00", "#67FFFF"],
    legend: {
      icon: "rect",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 16,
      top: "10%",
      right: "8%",
      textStyle: { color: "#fff" },
    },
    grid: { top: "25%", left: "26.5%", right: "8%", bottom: "20%" },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: xAxisData,
        axisLabel: { color: "#fff" },
        axisLine: { lineStyle: { color: "#425b78" } },
        axisTick: { show: false },
      },
    ],
    yAxis: [
      {
        type: "value",
        interval: 1,
        axisLabel: { color: "#fff" },
        splitLine: { lineStyle: { color: "#587485", type: "dashed" } },
      },
    ],
    series: [
      {
        name: "故障",
        type: "line",
        smooth: true,
        showSymbol: false,
        lineStyle: { color: "#DFB80B" },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(223,172,105,0.7)" },
            { offset: 1, color: "rgba(212,190,161,0.4)" },
          ]),
        },
        data: faultData,
      },
      {
        name: "运行",
        type: "line",
        smooth: true,
        showSymbol: false,
        lineStyle: { color: "#69f0ff" },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(107,205,216,0.7)" },
            { offset: 1, color: "rgba(143,192,127,0.4)" },
          ]),
        },
        data: runData,
      },
    ],
  };

  if (!myChart) myChart = echarts.init(charts.value!);
  myChart.setOption(option, true);
}

/* 4. 首次 + 城市变化立即刷新 */
nextTick(drawLine);
watch(() => props.city, drawLine);
</script>
<style scoped lang="scss">
.box7 {
  width: 100%;
  height: 100%;
  // background: url(../../images/dataScreen-main-cb.png) no-repeat;
  // background-size: 100% 100%;
  // background-color: red;
  border-bottom: 1px solid #ccc;
  .title {
    position: absolute;
    top: 3%;
    letter-spacing: 8px; /* 设置字间距 */
    writing-mode: vertical-rl;
    p {
      color: white;
      font-size: 14px;
    }
  }
  .zongcishu {
    div {
      padding: 4px;
    }
    text-align: center;
    font-size: 12px;
    position: absolute;
    top: 10%;
    left: 5%;
  }

  .charts {
    height: 300px;
  }
}
</style>
